﻿@{
    ViewBag.Title = "ListMember";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

@section scripts
{
    <script type="text/javascript" src="~/Scripts/App/Admin/member_list.js"></script>
}


<!-- Page's header -->
<div class="content-header">
    <div class="header-section">
        <h1>
            <i class="gi gi-certificate"></i>Quản Lý Thành Viên<br>
            <small>Danh Sách</small>
        </h1>
    </div>
</div>
<ul class="breadcrumb breadcrumb-top">
    <li><a href="../Admin/index"><i class="fa fa-home"></i></a></li>
    <li><a href="../Admin/ListMember">Thành Viên</a></li>
    <li><a href="../Admin/ListMember">Quản Lý</a></li>
</ul>

<!-- List Member -->
<div class="tab-content">
    <div id="listmem-div" class="block block-alt-noborder tab-pane fade in active animation-slideRight">
        <div class="container-fluid">
            <div class="row">
                <div class="pull-right col-md-2" style="margin-left: 10px"><a href="AddMember" class="btn btn-block btn-success">Tạo Mới</a></div>
                <div class="dataTables_filter" id="example-datatable_filter">
                    <div class="input-group">
                        <input type="text" data-bind="instantValue: SearchString, event: { keypress: $root.EnterSendMsg }" aria-controls="example-datatable" class="form-control" placeholder="Tìm Kiếm">
                        <span class="input-group-addon" style="cursor: pointer" data-bind="click: $root.SendMsg">
                            <i class="fa fa-search"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <br />

        <div class="table-responsive">
            <div class="row" data-bind="hidden: Loaded"><i class="fa fa-asterisk fa-spin fa-4x"></i></div>
            <table class="table table-vcenter table-striped table-hover" data-bind="visible: Loaded">
                <thead>
                    <tr class="text-center">
                        <th class="text-center">#</th>
                        <th>Tài Khoản</th>
                        <th style="width: 250px;">Họ Tên</th>
                        <th class="text-center" style="width: 150px;">Giới Tính</th>
                        <th>Email</th>
                        <th class="text-center" style="width: 150px;">CMND</th>
                        <th class="text-center" style="width: 150px;">Cấp Độ</th>
                        <th class="text-center" style="width: 150px;">Điểm Thưởng</th>
                        <th class="text-center" style="width: 200px;">Thao Tác</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: Members">
                    <tr>
                        <td class="text-center" data-bind="text: MemId"></td>
                        <td data-bind="text: UserName"></td>
                        <td>
                            <label data-bind="text: FirstName"></label>
                            <label data-bind="text: LastName"></label>
                        </td>
                        <td class="text-center" data-bind="text: Gender=='Male'?'Nam':'Nữ'"></td>
                        <td data-bind="text: Email"></td>
                        <td class="text-center" data-bind="text: CMND"></td>
                        <td class="text-center" data-bind="text: Level"></td>
                        <td class="text-center" data-bind="text: Point"></td>
                        <td class="text-center">
                            <div class="btn-group btn-group-xs">
                                <a class="btn btn-xs btn-default" href="#editmem-div" data-toggle="tab" data-bind="click: $root.doView">
                                    <i class="fa fa-pencil"></i>Sửa
                                </a>
                                <button class="btn btn-xs btn-danger" data-bind="click: $root.doDelete">
                                    <i class="fa fa-times"></i>Xóa
                                </button>
                            </div>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="9">
                            <div class="col-md-4 pull-right">
                                <ul class="pager">
                                    <li class="prev" data-bind="css: { disabled: IsPrevious() === false }">
                                        <a href="#" data-bind="    click: $root.doPrevious">← Trang Trước</a>
                                    </li>
                                    <li class="next" data-bind="css: { disabled: IsNext() === false }">
                                        <a href="#" data-bind="    click: $root.doNext">Trang Sau →</a>
                                    </li>
                                </ul>
                            </div>

                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>


    <!-- Member Edit Popup -->
    <div id="editmem-div" class="block tab-pane animation-slideRight fade">
        <form id="editMem-frm" data-bind="submit: $root.doEdit" class="form-horizontal form-bordered" novalidate="novalidate">
            <div class="form-group">
                <label for="val_title" class="col-md-4 control-label">Tài Khoản<span class="text-danger">*</span></label>
                <div class="col-md-6">
                    <div class="input-group">
                        <input type="text" class="form-control" name="val_username" data-bind="value: UserName" id="val_username" disabled>
                        <span class="input-group-addon"><i class="gi gi-nameplate"></i></span>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label for="val_pname" class="col-md-4 control-label">Họ & Tên<span class="text-danger">*</span></label>
                <div class="col-md-6">
                    <div class="input-group">
                        <input type="text" placeholder="Họ & Tên Đệm" class="form-control" name="val_fname" id="val_fname" data-bind="value: FirstName">
                        <input type="text" placeholder="Tên" class="form-control" name="val_lname" id="val_lname" data-bind="value: LastName">
                        <span class="input-group-addon"><i class="gi gi-nameplate"></i></span>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label for="val_title" class="col-md-4 control-label">Giới Tính<span class="text-danger">*</span></label>
                <div class="col-md-6">
                    <div class="input-group">
                        <label class="radio">
                            <input type="radio" name="gender" value="Male" data-bind="checked: Gender.ForCheck" />
                            Nam
                        </label>
                        <label class="radio">
                            <input type="radio" name="gender" value="Female" data-bind="checked: Gender.ForCheck" />
                            Nữ
                        </label>
                        <span class="input-group-addon"><i class="gi gi-nameplate"></i></span>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label for="val_title" class="col-md-4 control-label">Email<span class="text-danger">*</span></label>
                <div class="col-md-6">
                    <div class="input-group">
                        <input type="text" class="form-control" name="val_email" data-bind="value: Email" id="val_email">
                        <span class="input-group-addon"><i class="gi gi-nameplate"></i></span>
                    </div>
                </div>
            </div>

            <div class="form-group form-actions">
                <div class="col-md-8 col-md-offset-4">
                    <button class="btn btn-sm btn-primary" type="submit"><i class="fa fa-arrow-right"></i>Lưu Thay Đổi</button>
                    <a class="btn btn-sm btn-warning" href="#listmem-div" data-toggle="tab" type="button"><i class="gi gi-sort"></i>Danh Sách</a>
                </div>
            </div>
        </form>
    </div>
</div>